<ion-header>
  <ion-navbar>
    <ion-title>
      好玩的DEMO
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<ion-grid>
  <ion-row class="row-bottom">
    <ion-col class="item" (click)="itemTapped($event, 'MasonryCardsPage')">
      <ion-icon name="ios-analytics-outline" class="icon-size" style="color:#d26363"></ion-icon>
      <div class="title">
        <small>瀑布流</small>
      </div>
    </ion-col>

    <ion-col class="item item-center" (click)="itemTapped($event, 'PhotoswipeDemoPage')">
      <ion-icon name="ios-images-outline" class="icon-size" style="color:#8d72dc"></ion-icon>
      <div class="title">
        <small>画廊</small>
      </div>
    </ion-col>

    <ion-col class="item" (click)="itemTapped($event, 'ProfileListPage')">
      <ion-icon name="ios-aperture-outline" class="icon-size" style="color:#97d263"></ion-icon>
      <div class="title">
        <small>个人主页</small>
      </div>
    </ion-col>

  </ion-row>


  <ion-row class="row-bottom">
    <ion-col class="item" (click)="itemTapped($event, 'LoginOnePage')">
      <ion-icon name="ios-log-in-outline" class="icon-size" style="color:#ecde1b"></ion-icon>
      <div class="title">
        <small>登录页</small>
      </div>
    </ion-col>

    <ion-col class="item item-center" (click)="itemTapped($event, 'CountdownPage')">
      <ion-icon name="ios-time-outline" class="icon-size" style="color:#55dac9"></ion-icon>
      <div class="title">
        <small>倒计时</small>
      </div>
    </ion-col>


<!--     <ion-col class="item item-center blank-item">
    </ion-col> -->

    <ion-col class="item blank-item">
    </ion-col>

  </ion-row>

</ion-grid>


<!-- <ion-grid>
  <ion-row *ngFor="let i of rowlens;">
    <ion-col class="item" (click)="itemTapped($event, items[i])">
      <ion-icon [name]="items[i*3].icon" class="icon-size" [style.color]="items[i*3].color"></ion-icon>
      <div class="title">
        <small>{{items[i].title}}</small>
      </div>
    </ion-col>

    <ion-col class="item item-center" *ngIf="i*3+1 < items.length">
      <ion-icon [name]="items[i*3+1].icon" class="icon-size" [style.color]="items[i*3+1].color"></ion-icon>
      <div class="title">
        <small>{{items[i+1].title}}</small>
      </div>
    </ion-col>

    <ion-col class="item" *ngIf="i*3+2 < items.length">
      <ion-icon [name]="items[i*3+2].icon" class="icon-size" [style.color]="items[i*3+2].color"></ion-icon>
      <div class="title">
        <small>{{items[i*3+2].title}}</small>
      </div>
    </ion-col>  

  </ion-row>
</ion-grid> -->







</ion-content>

